<template>
  <Page class="apply-form">
    <div class="question">
      <div class="question-title">
        <div class="apply-top-title1">知识产权质押</div>
        <div class="apply-top-title2">问卷调查</div>
      </div>
      <!-- 问卷内容 -->
      <div class="question-item">
        <div class="question-item-title">1.您认为贵公司具备了哪些适贷的条件(可多选)</div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers1.q1_a"
          >
            A、自主研发的产品拥有专利
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers1.q1_b"
          >
            B、能提供足额抵押
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers1.q1_c"
          >
            C、能够在一定时间内盈利偿还贷款
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers1.q1_d"
          >
            D、具备良好的信用
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers1.q1_e"
          >
            E、其他
          </van-checkbox>
        </div>
      </div>
      <div class="question-item">
        <div class="question-item-title">2.融资用途情况，贵公司向银行融资主要用于(可多选)</div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers2.q2_a"
          >
            A、流动资金
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers2.q2_b"
          >
            B、扩大生产规模的固定资产投资
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers2.q2_c"
          >
            C、提升企业技术水平的技术改造
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers2.q2_d"
          >
            D、其他
          </van-checkbox>
        </div>
      </div>
      <div class="question-item">
        <div class="question-item-title">3.贵公司目前资金需求状况</div>
        <van-radio-group v-model="answers.q3">
          <div class="question-ans">
            <van-radio name="A">A、有很大资金缺口，急需融资</van-radio>
          </div>
          <div class="question-ans">
            <van-radio name="B">B、略有资金缺口，需要融资</van-radio>
          </div>
          <div class="question-ans">
            <van-radio name="C">C、没有资金缺口，无需融资</van-radio>
          </div>
        </van-radio-group>
      </div>
      <div class="question-item">
        <div class="question-item-title">4.贵公司在融资过程中遇到的主要问题有(可多选)</div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_a"
          >
            A、缺乏有效担保物
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_b"
          >
            B、成本高
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_c"
          >
            C、审批手续繁琐
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_d"
          >
            D、审批流程慢
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_e"
          >
            E、缺乏有效融资渠道
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_f"
          >
            F、财务报表未能达到要求
          </van-checkbox>
        </div>
        <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_g"
          >
            G、没有问题，非常便利
          </van-checkbox>
        </div>
        <!-- <div class="question-ans">
          <van-checkbox
            icon-size="16px"
            shape="square"
            v-model="answers4.q4_h"
          >
            H、没有问题，非常便利
          </van-checkbox>
        </div> -->
      </div>
      <div class="question-item">
        5.贵公司对融资方面是否还有其它诉求或建议，如有请在下方填写(选填)
        <textarea
          rows="6"
          cols="30"
          v-model="answers_xt.q5"
        >
        </textarea>
      </div>
      <!-- <div class="question-item">
        <div class="question-item-title1">
          4.如已达成合作，此次专项行动开展以来新增业务中，企业实际用信金额
          <input
            class="question-num1"
            v-model="answers.q4_1"
            type="number"
            placeholder=""
            pattern="\d*"
          />
          万元，贷款余额
          <input
            class="question-num1"
            v-model="answers.q4_2"
            type="number"
            placeholder=""
            pattern="\d*"
          />
          万元，其中首贷余额
          <input
            class="question-num1"
            v-model="answers.q4_3"
            type="number"
            placeholder=""
            pattern="\d*"
          />
          万元、中长期贷款余额
          <input
            class="question-num1"
            v-model="answers.q4_4"
            type="number"
            placeholder=""
            pattern="\d*"
          />
          万元、信用贷款余额
          <input
            class="question-num1"
            v-model="answers.q4_5"
            type="number"
            placeholder=""
            pattern="\d*"
          />
          万元、知识产权质押融资余额
          <input
            class="question-num1"
            v-model="answers.q4_6"
            type="number"
            placeholder=""
            pattern="\d*"
          />
          万元。
        </div>
        <div class="question-item-title2">
          (备注:①实际用信包括贷款、贸易融资、票据融资、融资租赁等。②首贷指银行机构向该客户首次发放贷款前，通过人行征信系统查询，该客户无贷款记录。③中长期贷款指原始期限在一年以上的各项贷款余额。④信用贷款指以纯信用方式发放的贷款。⑤知识产权质押贷款指该笔贷款中有知识产权作为押品。)
        </div>
      </div> -->
      <div
        class="submit-btn"
        v-if="!type"
      >
        <div
          class="submit-bo"
          @click="goSub"
        >提交</div>
      </div>
    </div>
  </Page>
</template>

<script>
import { insertQuestion, getQuestionByrzId } from "@/interfaces/mini";
export default {
  name: "demoForm",
  components: {
  },
  data () {
    return {
      // 问卷的答案
      answers1: {
        q1_a: '',
        q1_b: '',
        q1_c: '',
        q1_d: '',
        q1_e: '',
      },
      answers2: {
        q2_a: '',
        q2_b: '',
        q2_c: '',
        q2_d: '',
        q2_e: '',
      },
      answers4: {
        q4_a: '',
        q4_b: '',
        q4_c: '',
        q4_d: '',
        q4_e: '',
        q4_f: '',
        q4_g: '',
      },
      answers: {
        q3: '',
      },
      answers_xt: {
        q5: ''
      },
      type: ''
    };
  },
  created () {
    this.getDetails()
  },
  methods: {
    async getDetails () {
      this.type = this.getUrlParam('type') || ''
      if (this.type == '1') {
        const params = {
          rzId: this.getUrlParam('id') || ''
        }
        const res = await getQuestionByrzId(params)
        console.log(res, 'res')
        // 数据反显
        Object.keys(this.answers1).forEach(pre => {
          this.answers1[pre] = res.data[pre]
        })
        Object.keys(this.answers2).forEach(pre => {
          this.answers2[pre] = res.data[pre]
        })
        Object.keys(this.answers).forEach(pre => {
          this.answers[pre] = res.data[pre]
        })
        Object.keys(this.answers4).forEach(pre => {
          this.answers4[pre] = res.data[pre]
        })
        Object.keys(this.answers_xt).forEach(pre => {
          this.answers_xt[pre] = res.data[pre]
        })
      }
    },
    async goSub () {
      if (Object.values(this.answers).some(val => !val) || !(Object.values(this.answers1).some(val => val)) || !(Object.values(this.answers2).some(val => val)) || !(Object.values(this.answers4).some(val => val))) {
        this.$toast('请填写问卷后提交')
      } else {
        // 处理数据值
        Object.keys(this.answers1).forEach(val => {
          if (this.answers1[val]) {
            this.answers1[val] = val.substr(-1).toUpperCase()
          }
        })
        Object.keys(this.answers2).forEach(val => {
          if (this.answers2[val]) {
            this.answers2[val] = val.substr(-1).toUpperCase()
          }
        })
        Object.keys(this.answers4).forEach(val => {
          if (this.answers4[val]) {
            this.answers4[val] = val.substr(-1).toUpperCase()
          }
        })
        const params = {
          rzId: this.getUrlParam("id") || '',
          qsName: '模板1',
          qsInfo: { ...this.answers, ...this.answers1, ...this.answers2, ...this.answers4, ...this.answers_xt}
        }
        console.log(params, 'params')
        const res = await insertQuestion(params)
        console.log(res, 'res')
        if (res.code == 200) {
          this.$toast.success('您的问卷已提交成功')
        } else {
          this.$toast('请勿重复提交')
        }
        // console.log(Object.values(this.answers))
      }
      // console.log(JSON.parse(JSON.stringify(this.answers)), 'answers')
    },
    getUrlParam (name) {
      const queryStr = String(window.location).split("?")[1] || "";
      name = encodeURIComponent(name);
      let arr = new RegExp("(^|&)" + name + "=([^&]*)(&|$)").exec(queryStr);
      if (arr) {
        return RegExp.$2;
      } else {
        return "";
      }
    },
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/demo/index.scss";

.question {
  width: 100vw;
  height: 100vh;
  background-color: #e3eeff;
  position: relative;
  background-image: url("https://zx-1311146360.cos.ap-shanghai.myqcloud.com/wx_h5/wx_h5_top.png");
  background-repeat: repeat-x;
  background-size: 100% auto;
  padding: 13px;
  padding-bottom: 50px;
  overflow-y: auto;
}
.question-body-btn {
  margin: 40px;
  height: 79px;
  background: #4b91e7;
  border-radius: 3px;
  font-size: 16px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.question-title {
  height: 89px;
  // border: 1px solid red;
  .apply-top-title1 {
    margin: 40px 0 0 28px;
    font-size: 21px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #ffffff;
  }
  .apply-top-title2 {
    margin: 6px 0 0 28px;
    font-size: 17px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #ffffff;
  }
}

/* 问卷内容 */
.question-item {
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.06);
  border-radius: 9px;
  padding: 18px;
  margin-bottom: 16px;
  /* flex-wrap: wrap; */
}
.question-item-title {
  /* height: 50px; */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 400;
  /* line-height: 59px; */
  color: #2c2c2c;
}
.question-ans {
  font-size: 14px;
  font-weight: 400;
  color: #777777 !important;
  /* display: flex;
	flex-direction: column;
	justify-content: space-between; */
  margin-top: 14px;
  display: flex;
  align-items: center !important;
  /* border: 1px solid red; */
  /deep/.van-radio__label {
    color: #777777 !important;
  }
}

/deep/.van-checkbox__label {
  color: #777777 !important;
}
.question-num {
  width: 68px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #e0e1e5 !important;
  border-radius: 2px;
  margin: 0 8px;
  font-size: 13px;
  font-weight: 400;
  padding: 0 8px;
}
.question-item-title1 {
  font-size: 15px;
  font-weight: 400;
  color: #2c2c2c;
  /* display: flex;
	align-items: center; */
  /* flex-wrap: wrap; */
}
.question-num1 {
  width: 50px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #e0e1e5 !important;
  border-radius: 2px;
  margin: 0 8px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  color: #777777;
  padding: 0 8px;
  display: inline-table;
}
.question-item-title2 {
  margin-top: 10px;
  font-size: 12px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #777777;
}
.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #e3eeff;
  border-radius: 3px;
  font-size: 16px;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  display: flex;
  justify-content: center;
  align-items: center;
}
.submit-bo {
  background: #4b91e7;
  height: 44px;
  width: calc(100% - 40px);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}
input {
  -webkit-appearance: none;
}
textarea {
  margin-top: 10px;
  width: 100%;
  -webkit-appearance: none;
  border: 1px solid rgb(238, 232, 232);
  padding: 2px;
}
</style>
